import React, { useState, useRef, useEffect } from 'react';
import { Card, Col, Row, Statistic, Space, Tag, Tabs,Descriptions } from 'antd';
// import { ReloadOutlined } from '@ant-design/icons';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { MyContent } from '@/components/MyUI';
import * as api from '@/services/report';
import * as utils from '@/utils/utils';
import {
  LightFilter,
  ProFormDatePicker,
  ProFormInstance,
} from '@ant-design/pro-form';
import moment from 'moment';
import { useModel } from 'umi';
import { CaretDownOutlined, CaretUpOutlined, ReloadOutlined } from '@ant-design/icons';
import Countdown from 'antd/lib/statistic/Countdown';


// const renderBadge = (count: number, total?: number, active = false) => {
//   let display = total ? `${count}/${total}` : count;
//   return (
//     <Badge
//       count={display}
//       overflowCount={9999}
//       showZero
//       style={{
//         marginTop: -4,
//         marginLeft: 2,
//         color: active ? '#1890FF' : '#999',
//         backgroundColor: active ? '#E6F7FF' : '#eee',
//       }}
//     />
//   );
// };



const List: React.FC = () => {
  const { hasRight } = useModel('useAuthModel');
  if (!hasRight('report_userstat')) {
    return <></>;
  }

  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();
  const [countdownTicks, setCountdownTicks] = useState<number>(
    Date.now() + 60000,
  );


  const [data, setData] = useState<API.ActiveStatList | undefined>(undefined);
  const [preTodayRegistCount, setPreTodayRegistCount] = useState<
    number | undefined
  >(undefined);
  const [activeGenre, setActiveGenre] = useState<string | undefined>('tot');
  const [statDay, setStatDay] = useState<string | undefined>(
    moment(new Date()).format('yyyy-MM-DD'),
  );
  const [statHour, setStatHour] = useState<boolean | undefined>(false);
  const [statType, setStatType] = useState<string | undefined>('1');
  
  const [myLoading, setMyLoading] = useState<boolean | undefined>(false);


  const reload = () => {
    loadData(
      {genre: activeGenre,
      statDay: statDay,
      statHour: statHour,
      statType: statType,}
      );
    // actionRef.current?.reload();
    setCountdownTicks(Date.now() + 60000);
  };

  const loadData = async (params:any) => {
    setMyLoading(true);
    const result = await api.activeStat(params, undefined, undefined);

    if (result.success) {
      setPreTodayRegistCount(data?.todayRegistCount);
      setData(result);
    }

    setMyLoading(false);
    return Promise.resolve(result);
  };
  


  useEffect(() => {
    loadData(
      {genre: activeGenre,
      statDay: statDay,
      statHour: statHour,
      statType: statType,}
      );
  }, []);

  const getMinuteAddText = () => {
    if (data == undefined || preTodayRegistCount == undefined) {
      return ``;
    }
    return (
      <>
        <div style={{ fontSize: 14, color: 'gray' }}>
          +{utils.formatNumber((data.todayRegistCount ?? 0) - preTodayRegistCount)}
        </div>
      </>
    );
  };
  
  const getSuffixText = (addText : string|undefined, newCount:number|undefined, oldCount:number|undefined) => {
    if(addText){
      let odds = (newCount ?? 0) - (oldCount ?? 0);
      return (
        <>
          <div style={{ fontSize: 14, color: 'gray' }}>
          {addText} {odds > 0 ? <CaretUpOutlined style={{color:'red'}}/> : <CaretDownOutlined  style={{color:'green'}}/>}
                  {utils.formatNumber(odds)}
          </div>
        </>
      );
    }
    else{
      return <></>
    }
  }

  
  
  const getCompareText = (addText : string|undefined, newCount:number|undefined, oldCount:number|undefined) => {
    if(addText){
      let odds = (newCount ?? 0) - (oldCount ?? 0);
      return (
        <>
          <div style={{ fontSize: 14, color: 'gray' }}>
          {addText} {odds > 0 ? <CaretUpOutlined style={{color:'red'}}/> : <CaretDownOutlined  style={{color:'green'}}/>}
                  {utils.formatNumber(odds)}　[{utils.formatNumber((oldCount ?? 0))}]
          </div>
        </>
      );
    }
    else{
      return <></>
    }
  }
  
  const getSuffixTitle = (title : string|undefined, count:number|undefined) => {
      return (
        <>
          <div style={{ fontSize: 14, color: 'gray' }}>
          {title} {utils.formatNumber(count)}
          </div>
        </>
      );
  }

  const getTotalTitle=()=>{
    if(activeGenre == 'regist' || activeGenre == 'tot'){
      return "";
    }
    else{
      return (
        <Tag 
        color="blue"
      >
        <b>总数量：{data?.activeTotal}</b>
      </Tag>
      );
    }
  }

  // const getActiveStatText = () => {
  //   if (data == undefined) {
  //     return `0 / 0`;
  //   }
  //   return `${utils.formatNumber(data.activeStat.t7)} / ${utils.formatNumber(
  //     data.activeStat.t30,
  //   )}`;
  // };
  // const getActiveStat3DayText = () => {
  //   if (data == undefined) {
  //     return `--`;
  //   }
  //   return `${utils.formatNumber(data.activeStat.t0)} / ${utils.formatNumber(
  //     data.activeStat.t1,
  //   )} / ${utils.formatNumber(data.activeStat.t2)} / ${utils.formatNumber(
  //     data.activeStat.t3,
  //   )} / ${utils.formatNumber(data.activeStat.t4)} / ${utils.formatNumber(
  //     data.activeStat.t5,
  //   )} / ${utils.formatNumber(data.activeStat.t6)} / ${utils.formatNumber(
  //     data.activeStat.t8,
  //   )}`;
  // };

  let columns: ProColumns<API.UserCountryStat>[] = [
    {
      title: '小时',
      // width: 200,
      hideInTable:  activeGenre != '1h',
      dataIndex: 'hour',
    },
    {
      title: '名称', //activeGenre == "all" ? statAllType == "2" ? "平台" : statAllType == "3" ? "客户端版本" : "国家" : "国家",
      // width: 200,
      hideInTable: activeGenre == '1h',
      dataIndex: 'country',
    },
    {
      title: '数量',
      // width: 200,
      dataIndex: 'count',
      render: (_, record) => {
        if(activeGenre == 'regist' && statType == "5"){
          return (<><b>{record.count}</b><br/>
          {getCompareText("较前日", record.count, record.dayCount)}
          {getCompareText("前二日", record.count, record.dayCount2)}
          {getCompareText("前三日", record.count, record.dayCount3)}
          </>);
        }
        else{
          return utils.formatNumber(record.count);
        }
        
      },
    },
    {
      title: '占比',
      // width: 200,
      // hideInTable:statAllType == "2" && activeGenre == "all",
      dataIndex: 'count',
      render: (_, record) => {
        return `${((record.count * 100) / (data?.activeTotal ?? 1)).toFixed(
          2,
        )}%`;
      },
    },
    {
      title: '日活数量',
      hideInTable: (
        activeGenre == '1d' || activeGenre == '1h' || activeGenre == 'regist'
      ),
      dataIndex: 'dayCount',
      render: (_, record) => {
        return utils.formatNumber(record.dayCount);
      },
    },
    {
      title: '日活占比',
      hideInTable: (
        activeGenre == '1d' || activeGenre == '1h' || activeGenre == 'regist'
      ),
      dataIndex: 'dayCount',
      render: (_, record) => {
        return `${
          data?.dayTotal
            ? (((record.dayCount ?? 0) * 100) / (data?.dayTotal ?? 1)).toFixed(
                2,
              )
            : 0
        }%`;
      },
    },
    {
      title: '日活/数量比',
      hideInTable: (
        activeGenre == '1d' || activeGenre == '1h' || activeGenre == 'regist'
      ),
      dataIndex: 'dayCount',
      render: (_, record) => {
        return `${
          data?.dayTotal
            ? (((record.dayCount ?? 0) * 100) / (record?.count ?? 1)).toFixed(2)
            : 0
        }%`;
      },
    },
    // {
    //   title: '较前日',
    //   hideInTable: (
    //     activeGenre != 'regist'
    //   ),
    //   dataIndex: 'dayCount',
    //   render: (_, record) => {
    //     return getCompareText(record.count, record.dayCount);
    //   },
    // },
    // {
    //   title: '较前二日',
    //   hideInTable: (
    //     activeGenre != 'regist'
    //   ),
    //   dataIndex: 'dayCount',
    //   render: (_, record) => {
    //     return getCompareText(record.count, record.dayCount2);
    //   },
    // },
    // {
    //   title: '较前三日',
    //   hideInTable: (
    //     activeGenre != 'regist'
    //   ),
    //   dataIndex: 'dayCount',
    //   render: (_, record) => {
    //     return getCompareText(record.count, record.dayCount3);
    //   },
    // },
  ];

  let registColumns: ProColumns<API.RegistStat>[] = [
    {
      title: '日期',
      align: 'center',
      width: 180,
      dataIndex: 'date',
      valueType: 'date',
    },
    {
      title: '合计',
      align: 'center',
      dataIndex: 'total',
      render: (_, record) => {
        return utils.formatNumber(record.total);
      },
    },
    {
      title: '苹果',
      align: 'center',
      dataIndex: 'ios',
      render: (_, record) => {
        return utils.formatNumber(record.ios);
      },
    },
    {
      title: '安卓',
      align: 'center',
      dataIndex: 'android',
      render: (_, record) => {
        return utils.formatNumber(record.android);
      },
    },
    {
      title: '安卓(GooglePlay)',
      align: 'center',
      dataIndex: 'androidGoogle',
      render: (_, record) => {
        return utils.formatNumber(record.androidGoogle);
      },
    },
    {
      title: '安卓(APK)',
      align: 'center',
      dataIndex: 'androidUniversal',
      render: (_, record) => {
        return utils.formatNumber(record.androidUniversal);
      },
    },
    {
      title: '苹果占比',
      dataIndex: 'count',
      width: 100,
      render: (_, record) => {
        return `${((record.ios * 100) / record.total).toFixed(2)}%`;
      },
    },
    {
      title: '安卓占比',
      dataIndex: 'count',
      width: 100,
      render: (_, record) => {
        return `${((record.android * 100) / record.total).toFixed(2)}%`;
      },
    },
    {
      title: 'GooglePlay/安卓',
      dataIndex: 'count',
      width: 130,
      render: (_, record) => {
        return `${((record.androidGoogle * 100) / record.android).toFixed(2)}%`;
      },
    },
    {
      title: 'APK/安卓',
      dataIndex: 'count',
      width: 100,
      render: (_, record) => {
        return `${((record.androidUniversal * 100) / record.android).toFixed(
          2,
        )}%`;
      },
    },
  ];

  return (
    <MyContent>
      <Card
        style={{ marginBottom: -48 }}
        tabList={[
          { tab: '统计总览', key: 'tot' },
          { tab: '注册统计', key: 'regist' },
          { tab: '时活跃', key: '1h' },
          { tab: '日活跃', key: '1d' },
          { tab: '周活跃', key: '7d' },
          { tab: '月活跃', key: '30d' },
          { tab: '总用户', key: 'all' },
        ]}
        activeTabKey={activeGenre}
        onTabChange={(key: string) => {
          console.log(key);
          setActiveGenre(key);
          if(key != "tot"){
            setCountdownTicks(-1);
          }
          else{
            setCountdownTicks(Date.now() + 60000);
          }
          let st = statType;
          if(key != "regist" && (statType == "4" || statType == "5")){
             st = "1";
             setStatType("1");
          }
          loadData({
              genre: key,
              statDay: statDay,
              statHour: statHour,
              statType: st,
          });
        }}
      >
          <LightFilter style={{ textAlign: 'right', visibility:activeGenre == "tot" ? 'hidden' :'visible',height:activeGenre == "tot" ? 0 : undefined }}>

              <Space
                style={{
                  visibility: activeGenre != 'regist' ? 'hidden' : 'visible',
                  width: activeGenre != 'regist' ? 0 : undefined,
                  marginRight:activeGenre != 'regist' ? 0 : 20
                }}
              >
                <Tabs
                  activeKey={statType}
                  style={{marginTop:-50}}
                  items={[
                    { label: '按注册渠道', key: '4' },
                    { label: '按小时统计', key: '5' },
                  ]}
                  onChange={(activeKey) => {
                    // console.log(activeKey,activeGenre);
                    setStatType(activeKey);
                    loadData(
                      {genre: activeGenre,
                      statDay: statDay,
                      statHour: statHour,
                      statType: activeKey,}
                      );
                  }}
                ></Tabs>
                {/* <Tabs
                  tabBarExtraContent={
                    <div style={{ marginLeft: 30,marginRight: 0,marginTop:-40 }}>
                      <ProFormSwitch
                        name="swHour"
                        initialValue={statHour}
                        label="小时统计"
                        fieldProps={{
                          onChange: (val) => {
                            console.log(val,activeGenre,statDay,"cai");
                            setStatHour(val);
                            loadData(
                              {genre: "regist",
                              statDay: statDay,
                              statHour: val,
                              statType: statType,}
                            );
                          },
                        }}
                      />
                    </div>
                  }
                /> */}
          
              </Space>

              <Space
                style={{
                  visibility: activeGenre == '1h' ? 'hidden' : 'visible',
                  width: activeGenre == '1h' ? 0 : undefined,
                  marginRight:activeGenre == '1h' ? 0 : 50
                }}
              >
                <Tabs
                  activeKey={statType}
                  style={{marginTop:-50}}
                  items={[
                    { label: '按国家统计', key: '1' },
                    { label: '按平台统计', key: '2' },
                    { label: '按版本统计', key: '3' },
                  ]}
                  onChange={(activeKey) => {
                    setStatType(activeKey);
                    loadData(
                      {genre: activeGenre,
                      statDay: statDay,
                      statHour: statHour,
                      statType: activeKey,}
                      );
                  }}
                ></Tabs>
              </Space>

              <Space
                style={{
                  visibility: activeGenre == '1d' || activeGenre == '1h' || activeGenre == 'regist' ? 'visible' : 'hidden',
                  width: activeGenre == '1d' || activeGenre == '1h' || activeGenre == 'regist' ? 500 : 0,
                }}
              >
                <Tabs
                  style={{marginTop:0,marginRight:20}}
                  tabBarExtraContent={
                      <ProFormDatePicker
                        label="统计日期"
                        name="statDate"
                        allowClear={false}
                        initialValue={statDay}
                        fieldProps={{
                          onChange(value, dateString) {
                            setStatDay(value?.format('yyyy-MM-DD'));
                            loadData(
                              {genre: activeGenre,
                              statDay: value?.format('yyyy-MM-DD'),
                              statHour: statHour,
                              statType: statType,}
                              );
                          },
                        }}
                      />
                  }
                />

                <Tabs
                  activeKey={statDay}
                  style={{marginTop:-15}}
                  items={[
                    { label: '今天', key: moment().format('yyyy-MM-DD') },
                    {
                      label: '昨天',
                      key: moment().add(-1, 'day').format('yyyy-MM-DD'),
                    },
                    {
                      label: '前天',
                      key: moment().add(-2, 'day').format('yyyy-MM-DD'),
                    },
                  ]}
                  onChange={(activeKey) => {
                    // console.log(activeKey);
                    setStatDay(activeKey);
                    loadData(
                      {genre: activeGenre,
                      statDay: activeKey,
                      statHour: statHour,
                      statType: statType,}
                      );
                  }}
                />
              </Space>

          </LightFilter>
      </Card>

      
      <Card
        extra={
          <Space>
            <Countdown
              title=""
              key="cdRefresh"
              value={countdownTicks}
              format="s"
              prefix=""
              suffix="秒后刷新"
              valueStyle={{
                fontSize: 14,
                color: 'gray',
              }}              
              onFinish={reload}
            />
            <ReloadOutlined onClick={reload} />
          </Space>
        }
        style={{
          marginBottom: 20,
          visibility: activeGenre == 'tot' ? 'visible' : 'hidden',
          height: activeGenre == 'tot' ? undefined : 0,
        }}
      >
        <Row gutter={16}>
          <Col span={2}>
            <Statistic
              title="当前在线"
              value={utils.formatNumber(data?.currentConnCount)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="7日最大在线"
              value={utils.formatNumber(data?.maxOnline)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>{data?.maxOnlineTime}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="总用户"
              value={utils.formatNumber(data?.totalDbUser)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="统计总用户"
              value={utils.formatNumber(data?.totalUser)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较昨日',data?.totalUser,data?.totalUser2)}
            />
          </Col>
          <Col span={8}>
            <Statistic
              title="VIP总用户"
              value={utils.formatNumber(data?.totalVip)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较昨日',data?.totalVip,data?.totalVip2)}
            />
          </Col>
        </Row>
        
        {data?.registDetails?.map((reg)=>{
          return(
            <Row gutter={16} style={{marginTop:60}}>
              <Col span={2}>
                <Statistic
                  title={reg.title}
                  value={utils.formatNumber(reg.count)}
                  suffix={reg.title?.indexOf('今日') != -1 ? getMinuteAddText() : ""}
                />
              </Col>
              <Col span={2}>
                <Statistic
                  title="渠道分布"
                  value={""}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={                
                    <Descriptions size="small" column={1}>
                      {
                        reg.channels?.map((val) =>{
                          return <Descriptions.Item label="">{getSuffixTitle(`${val.key}: `,val.value)}</Descriptions.Item>
                        })
                      }
                    </Descriptions>
                  }
                />
              </Col>
              <Col span={12}>
                <Statistic
                  title="国家分布"
                  value={""}
                  valueStyle={{
                    fontSize: 0,
                  }}
                  prefix={                
                    <Descriptions size="small" column={7} >
                      {
                        utils.listHtoV(reg.countrys, 7)?.map((val) =>{
                          return <Descriptions.Item label="">{getSuffixTitle(`${val.key}: `,val.value)}</Descriptions.Item>
                        })
                      }
                    </Descriptions>
                  }
                />
              </Col>
            </Row>
          );
        })}
        
        
        <Row gutter={16} style={{marginTop:60}}>
          <Col span={2}>
            <Statistic
              title="今日活跃"
              value={utils.formatNumber(data?.activeStat.t0)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="昨日活跃"
              value={utils.formatNumber(data?.activeStat.t1)}
              // suffix={getSuffixText('较上日',data?.activeStat.t1,data?.activeStat.t2)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t1,data?.activeStat.t2)}<br/>{getSuffixText('较上周',data?.activeStat.t1,data?.activeStat.t8)}</>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="前日活跃"
              value={utils.formatNumber(data?.activeStat.t2)}
              // suffix={getSuffixText('较上日',data?.activeStat.t2,data?.activeStat.t3)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t2,data?.activeStat.t3)}<br/>{getSuffixText('较上周',data?.activeStat.t2,data?.activeStat.t9)}</>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="三天前活跃"
              value={utils.formatNumber(data?.activeStat.t3)}
              // suffix={getSuffixText('较上日',data?.activeStat.t3,data?.activeStat.t4)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t3,data?.activeStat.t4)}<br/>{getSuffixText('较上周',data?.activeStat.t3,data?.activeStat.t10)}</>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="四天前活跃"
              value={utils.formatNumber(data?.activeStat.t4)}
              // suffix={getSuffixText('较上日',data?.activeStat.t4,data?.activeStat.t5)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t4,data?.activeStat.t5)}<br/>{getSuffixText('较上周',data?.activeStat.t4,data?.activeStat.t11)}</>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="五天前活跃"
              value={utils.formatNumber(data?.activeStat.t5)}
              // suffix={getSuffixText('较上日',data?.activeStat.t5,data?.activeStat.t6)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t5,data?.activeStat.t6)}<br/>{getSuffixText('较上周',data?.activeStat.t5,data?.activeStat.t12)}</>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="六天前活跃"
              value={utils.formatNumber(data?.activeStat.t6)}
              // suffix={getSuffixText('较上日',data?.activeStat.t5,data?.activeStat.t6)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t6,data?.activeStat.t7)}<br/>{getSuffixText('较上周',data?.activeStat.t6,data?.activeStat.t13)}</>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="七天前活跃"
              value={utils.formatNumber(data?.activeStat.t7)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<>{getSuffixText('较上日',data?.activeStat.t7,data?.activeStat.t8)}<br/>{getSuffixText('较上周',data?.activeStat.t7,data?.activeStat.t14)}</>}
            />
          </Col>
        </Row>

        
        <Row gutter={16} style={{marginTop:60}}>
          <Col span={2}>
            <Statistic
              title="本周活跃"
              value={utils.formatNumber(data?.weekCount)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="上周活跃"
              value={utils.formatNumber(data?.weekCount2)}
              // suffix={getSuffixText('较上周',data?.weekCount2,data?.weekCount3)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较上周',data?.weekCount2,data?.weekCount3)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="二周前活跃"
              value={utils.formatNumber(data?.weekCount3)}
              // suffix={getSuffixText('较上周',data?.weekCount3,data?.weekCount4)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较上周',data?.weekCount3,data?.weekCount4)}
            />
          </Col>
          <Col span={10}>
            <Statistic
              title="三周前活跃"
              value={utils.formatNumber(data?.weekCount4)}
            />
          </Col>
        </Row>

        
        <Row gutter={16} style={{marginTop:60}}>
          <Col span={2}>
            <Statistic
              title="本月活跃"
              value={utils.formatNumber(data?.monthCount)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="上月活跃"
              value={utils.formatNumber(data?.monthCount2)}
              // suffix={getSuffixText('较上月',data?.monthCount2,data?.monthCount3)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较上月',data?.monthCount2,data?.monthCount3)}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="二月前活跃"
              value={utils.formatNumber(data?.monthCount3)}
              // suffix={getSuffixText('较上月',data?.monthCount3,data?.monthCount4)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={getSuffixText('较上月',data?.monthCount3,data?.monthCount4)}
            />
          </Col>
          <Col span={10}>
            <Statistic
              title="三月前活跃"
              value={utils.formatNumber(data?.monthCount4)}
            />
          </Col>
        </Row>


        {data?.saleDays?.map((sale)=>{
          return(
          <Row gutter={16} style={{marginTop:60}}>
          <Col span={2}>
            <Statistic
              title={sale.title}
              value={utils.formatNumber( ((sale.amount ?? 0) + (sale.renewAmount ?? 0) + (sale.siteAmount ?? 0)).toFixed(2) )}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {(sale.count ?? 0) + (sale.renewCount ?? 0) + (sale.siteCount ?? 0)}</div>}
              //<br/>新增/续订 {(sale.count ?? 0) + (sale.siteCount ?? 0)}/{sale.renewCount}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="新增总计"
              value={utils.formatNumber(((sale.amount ?? 0) + (sale.siteAmount ?? 0)).toFixed(2))}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {(sale.count ?? 0) +(sale.siteCount ?? 0)}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="官网"
              value={utils.formatNumber(sale.siteAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.siteCount}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="AppStore新增"
              value={utils.formatNumber(sale.appleAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.appleCount}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="GooglePlay新增"
              value={utils.formatNumber(sale.googleAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.googleCount}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="续订总计"
              value={utils.formatNumber(((sale.renewAmount ?? 0)).toFixed(2))}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {(sale.renewCount ?? 0) }</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="AppStore续订"
              value={utils.formatNumber(sale.renewAppleAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.renewAppleCount}</div>}
            />
          </Col>
          <Col span={2}>
            <Statistic
              title="GooglePlay续订"
              value={utils.formatNumber(sale.renewGoogleAmount)}
            />
            <Statistic
              value={""}
              valueStyle={{
                fontSize: 0,
              }}
              prefix={<div style={{ fontSize: 14, color: 'gray' }}>订单数 {sale.renewGoogleCount}</div>}
            />
          </Col>

        </Row>);
        })}

        
      </Card>

      <ProTable
        headerTitle={getTotalTitle()}
        rowKey="id"
        options={{
          fullScreen: false,
          reload: false,
          setting: false,
          density: false,
        }}
        style={{
          visibility: (activeGenre == 'regist' && statType == "4") || activeGenre == 'tot' ? 'hidden' : 'visible',
          height: (activeGenre == 'regist' && statType == "4") || activeGenre == 'tot' ? 0 : undefined,
        }}
        loading={myLoading}
        columnEmptyText={''}
        actionRef={actionRef}
        formRef={formRef}
        columns={columns}
        search={false}
        pagination={false}
        // toolbar={{
        //   multipleLine: true,
          //filter: (
            // <LightFilter style={{ textAlign: 'right' }}>
            //   <Tag
            //     color="blue"
            //     style={{
            //       visibility: activeGenre == 'regist' || activeGenre == 'tot' ? 'hidden' : 'visible',
            //     }}
            //   >
            //     <b>总数量：{data?.activeTotal}</b>
            //   </Tag>

            //   <Space
            //     style={{
            //       // visibility: activeGenre == 'all' ? 'visible' : 'hidden',
            //       marginRight:50
            //     }}
            //   >
            //     <Tabs
            //       activeKey={statType}
            //       style={{marginTop:-50}}
            //       items={[
            //         { label: '按国家统计', key: '1' },
            //         { label: '按平台统计', key: '2' },
            //         { label: '按版本统计', key: '3' },
            //       ]}
            //       onChange={(activeKey) => {
            //         setStatType(activeKey);
            //         loadData(
            //           {genre: activeGenre,
            //           statDay: statDay,
            //           statHour: statHour,
            //           statType: activeKey,}
            //           );
            //       }}
            //     ></Tabs>
            //   </Space>

            //   <Space
            //     style={{
            //       visibility: activeGenre == '1d' ? 'visible' : 'hidden',
            //       width: activeGenre == '1d' ? 550 : 0,
            //     }}
            //   >
            //     {/* <Tabs
            //       tabBarExtraContent={
            //         <div style={{ marginRight: 10 }}>
            //           <ProFormSwitch
            //             name="swHour"
            //             initialValue={statHour}
            //             label="小时活跃[国家]"
            //             fieldProps={{
            //               onChange: (val) => {
            //                 // console.log(val);
            //                 setStatHour(val);
            //                 loadData(
            //                   {genre: activeGenre,
            //                   statDay: statDay,
            //                   statHour: val,
            //                   statType: statType,}
            //                   );
            //               },
            //             }}
            //           />
            //         </div>
            //       }
            //     /> */}

            //     <Tabs
            //       tabBarExtraContent={
            //         <div style={{ marginRight: 10 }}>
            //           <ProFormDatePicker
            //             label="统计日期"
            //             name="statDate"
            //             allowClear={false}
            //             initialValue={statDay}
            //             fieldProps={{
            //               onChange(value, dateString) {
            //                 // console.log(value, dateString,value?.format("yyyy-MM-DD"));
            //                 setStatDay(value?.format('yyyy-MM-DD'));
            //                 loadData(
            //                   {genre: activeGenre,
            //                   statDay: value?.format('yyyy-MM-DD'),
            //                   statHour: statHour,
            //                   statType: statType,}
            //                   );
            //               },
            //             }}
            //           />
            //         </div>
            //       }
            //     />

            //     <Tabs
            //       activeKey={statDay}
            //       items={[
            //         { label: '今天', key: moment().format('yyyy-MM-DD') },
            //         {
            //           label: '昨天',
            //           key: moment().add(-1, 'day').format('yyyy-MM-DD'),
            //         },
            //         {
            //           label: '前天',
            //           key: moment().add(-2, 'day').format('yyyy-MM-DD'),
            //         },
            //       ]}
            //       onChange={(activeKey) => {
            //         // console.log(activeKey);
            //         setStatDay(activeKey);
            //         // formRef.current?.setFieldValue("statDate", statDay);
            //                 loadData(
            //                   {genre: activeGenre,
            //                   statDay: activeKey,
            //                   statHour: statHour,
            //                   statType: statType,}
            //                   );
            //       }}
            //     />

            //   </Space>
            // </LightFilter>
          //),
          // menu: {
          //   type: 'tab',
          //   activeKey: activeGenre,
          //   items: [{label:"注册统计", key:"regist"},{label:"日活跃", key:"1d"},{label:"7天活跃", key:"7d"},{label:"30天活跃", key:"30d"},{label:"总用户", key:"all"}],
          //   onChange: (key) => {
          //     setActiveGenre(key as string);
          //     // if(key == "1d"){
          //     //   setSubTabData(dayTabs);
          //     // }
          //     // else{
          //     //   setSubTabData([]);
          //     // }
          //   },
          // },
          // tabs: {
          //   activeKey: activeDay,
          //   items: subTabData,
          //   onChange: (key) => {
          //     setActiveDay(key)
          //   },
          // },
        // }}
        // params={{
        //   genre: activeGenre,
        //   statDay: statDay,
        //   statHour: statHour,
        //   statAllType: statAllType,
        // }}
        // request={loadData}
        dataSource={data?.data}
      />

      <ProTable
        rowKey="id"
        options={{
          fullScreen: false,
          reload: false,
          setting: false,
          density: false,
        }}
        loading={myLoading}
        style={{
          visibility: (activeGenre == 'regist' && statType == "4") ? 'visible' : 'hidden',
          height: (activeGenre == 'regist' && statType == "4") ? undefined : 0,
        }}
        columnEmptyText={''}
        actionRef={actionRef}
        formRef={formRef}
        columns={registColumns}
        search={false}
        pagination={false}
        // params={{
        //   genre: activeGenre,
        //   statDay: statDay,
        //   statHour: statHour,
        //   statType: statType,
        // }}
        // request={loadData}
        dataSource={data?.registStat}
      />

    </MyContent>
  );
};

export default List;
